import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
  @ViewChild('video_box') video_box
  @ViewChild('video_element') video_ele
  @ViewChild('video_ctrl') video_ctrl
  @ViewChild('progress_box') progress_box
  @ViewChild('progress_bar') progress_bar
  @ViewChild('progress_ctl') progress_ctl
  @ViewChild('buffer_bar') buffer_bar
  @ViewChild('download') download
  @ViewChild('full_screen') full_screen
  oVideoBox
  oVideo
  oVideoCtrl
  oProgressBox
  oProgressBar
  oProgressCtl
  oBufferBar
  oDownload
  oFullScreen
  video_src: string = 'https://cc-west-usa.oss-us-west-1.aliyuncs.com/15404832/1313403631687.mp4'
  // video_src: string = 'http://122.228.251.158/vcloud1049.tc.qq.com/1049_M0139200001jMHza2ei3OY1001122187.f40.mp4?vkey=E3CE5F8CCB38DCB1C583F4E9D0C71B26416BE84BCDE4BFCD8D6BC7C04E6A345E634345CD14428EADCB22E5C079DD6F6816BBB62B78915143286A2AC197D4F137B0E6CA3B8C85C1D003E93FEA57E90D2A66B00F3BEAB3CFA4'
  video_duration: string = '00.00' // 返回视频的长度（以秒计）
  video_currentTime: string = '00.00' // 设置或返回视频中的当前播放位置（以秒计）
  video_readyState: number = 0 // 返回视频当前的就绪状态[0-4]
  video_loaded: boolean = false // 是否已经可以播放

  progress_bar_width: number = 0
  offset_left: number = 0
  is_full_screen: boolean = false

  constructor(public navCtrl: NavController) {
  }

  ionViewDidLoad() {
    this.oVideoBox = this.video_box.nativeElement
    this.oVideo = this.video_ele.nativeElement
    this.oVideoCtrl = this.video_ctrl.nativeElement
    this.oProgressBox = this.progress_box.nativeElement
    this.oProgressBar = this.progress_bar.nativeElement
    this.oProgressCtl = this.progress_ctl.nativeElement
    this.oBufferBar = this.buffer_bar.nativeElement
    this.oDownload = this.download.nativeElement
    this.oFullScreen = this.full_screen.nativeElement
    this.progress_bar_width = this.oProgressBox.offsetWidth
    this.offset_left = this.oProgressBar.getBoundingClientRect().left
    this.initVideo()
  }

  initVideo() {
    this.oVideo.onloadeddata = ev => {
      console.log('The video resource is loaded.')
      this.video_duration = this.formatTime((Math.ceil(this.oVideo.duration) / 100))
      this.video_currentTime = this.formatTime(this.oVideo.currentTime)
      this.video_loaded = true
      console.log([this.oVideo])
      this.moveProgressBar()
      this.moveBufferBar()

      this.oVideo.ontimeupdate = ev => {
        this.moveProgressBar()
        this.moveBufferBar()
      }
      this.oProgressCtl.ontouchstart = ev => { }
      this.oProgressCtl.ontouchmove = ev => this.calcCurrentTime(ev.touches[0].clientX)
      this.oProgressCtl.ontouchend = ev => { }
      this.oProgressBox.onclick = ev => this.calcCurrentTime(ev.clientX)
      this.oFullScreen.onclick = ev => {
        if (this.is_full_screen) {
          document['webkitCancelFullScreen']()
          this.is_full_screen = false
        } else {
          this.oVideoBox['webkitRequestFullScreen']()
          this.is_full_screen = true
        }
      }
    }
  }
  calcCurrentTime(clientX: number) {
    this.oVideo.currentTime = this.oVideo.duration * (clientX - this.offset_left) / this.progress_bar_width
    this.moveProgressBar()
  }
  getVideoBuffer() {
    return this.oVideo.buffered.end(0)
  }
  changeCurrentTime() {
    this.video_currentTime = this.formatTime((Math.ceil(this.oVideo.currentTime) / 100))
  }
  moveProgressBar() {
    this.oProgressBar.style.width = `${this.oVideo.currentTime / this.oVideo.duration * 100}%`
    this.changeCurrentTime()
  }
  moveBufferBar() {
    this.oBufferBar.style.width = `${this.oVideo.buffered.end(0) / this.oVideo.duration * 100}%`
  }
  formatTime(time: string | number): string {
    let str = (+time).toFixed(2)
    return str.length < 5 ? `0${str}` : str
  }
  getVideoReadyState() {
    this.video_readyState = this.oVideo.readyState
    return this.video_readyState
  }
  playOrPause() {
    if (!this.video_loaded) return console.warn('The video resource is not loaded!')
    if (this.oVideo.paused) {
      this.oVideo.play()
    } else {
      this.oVideo.pause()
    }
  }

}
